<template>
  <div class="wrapper-box">
    <Top>
      <slot>购物车</slot>
    </Top>
    <div class="cartLayout">
      <cube-checkbox-group class="courseList" v-model="checkList">
        <div
          class="courseItem"
          v-for="courseItem in cartList"
          :key="courseItem.id"
        >
          <cube-checkbox :option="`${courseItem.id}`">
            <div class="courseInfo">
              <img :src="courseItem.pic" alt="" />
              <div class="course-text">
                <p class="course-title">{{ courseItem.titile }}</p>
                <span>¥{{ courseItem.price }}元</span>
              </div>
            </div>
          </cube-checkbox>
          <cube-button class="remove" @click="removeCart(courseItem.id)"
            >删除</cube-button
          >
        </div>
      </cube-checkbox-group>
      <div class="cartButton">
        <cube-checkbox v-model="selectAll" @input="isSelectAll"
          >全选</cube-checkbox
        >
        <div>合计¥{{ total }}元</div>
        <cube-button @click="emptyCart">去结算</cube-button>
      </div>
    </div>
  </div>
</template>

<script>
import Top from "../../components/Top";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      checkList: [],
      selectAll: false,
      total: 0,
    };
  },

  components: {
    Top,
  },

  computed: {
    ...mapState("course", ["cartList"]),
  },
  watch: {
    checkList() {
      //购物车的总价 
      this.total = this.checkList.reduce((x, y) => {
        let cart = this.cartList.find((item) => item.id == y);
        // console.log(this.checkList)
        // console.log(cart);
        return x + cart.price;
      }, 0);
      if (
        this.cartList.length &&
        this.checkList.length == this.cartList.length
      ) {
        this.selectAll = true;
      } else {
        this.selectAll = false;
      }
    },
  },
  methods: {
    ...mapMutations("course", ["removeCarList", "emptyCarList"]),
    removeCart(id) {
      this.removeCarList(id);
      // 存checkList的时候没有存id 每一项item就是id
      // this.checkList = this.checkList.filter((item) => item.id != id);
      this.checkList = this.checkList.filter((item) => item != id);
      // console.log(this.checkList)
      // console.log(id)
    },
    emptyCart() {
      this.dialog = this.$createDialog({
        type: "confirm",
        title: "确认支付",
        content: `共需要支付${this.total}`,
        prompt: {
          value: "",
          placeholder: "请输入",
        },
        confirmBtn: {
          text: "购买",
        },
        onConfirm: (e, promptValue) => {
          this.emptyCarList();
          this.$createToast({
            type: "text",
            time: 700,
            txt: "购买成功",
          }).show();
          this.total = 0;
        },
      }).show();
    },
    isSelectAll(value) {
      if (value) {
        this.checkList = this.cartList.map((x) => x.id.toString());
        this.selectAll = true;
      } else {
        this.checkList = [];
        this.selectAll = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.cartLayout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.courseList {
  flex: 1;
  .cube-checkbox {
  }
  img {
    width: 100px;
    height: 46px;
  }
}

.cartButton {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  button {
    width: 40%;
    background-color: red;
  }
}

.cube-checkbox-label {
  width: 100%;
}

.courseInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  flex: 1;
  .course-text {
    width: 100%;
  }
}

.courseItem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #ebebeb;
  p {
    padding-left: 15px;
  }
  span {
    padding-left: 15px;
  }
  button {
    width: 20%;
  }
}
</style>
